<template>
  <div class="headLsit" >
    <div class="headLsit-header" >
      <div class="search-inp">
        <div class="item">
          <span class="item-text">账号</span>
          <input
            type="text"
            v-model="sitePhone"
            placeholder="请输入账号"
          />
        </div>
        <div class="item" style="margin-left:30px;">
          <span class="item-text">申请时间</span>
             <el-date-picker v-model="indatetime" style="height:42px;" size="small" type="daterange" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="item" style="margin-left:10px;">
          <span class="item-text">账号状态</span>
          <el-select v-model="state" placeholder="请选择">
            <el-option
              v-for="item in searchoptions1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        
      </div>
      <div class="item">
          <div class="search-btn">
             <el-button type="primary" @click="searchClick" style="height:40px;">筛选</el-button>
              <el-button type="primary" @click="emptyClick">清空</el-button>
               <!-- <el-button type="primary" @click="searchClicka">添加团长</el-button> -->
          </div>
        </div>
    </div>
    <div class="table">
      <el-table :data="arr" stripe border style="width: 100%">
         <el-table-column
          prop="sitePhone"
          label="账号"
        ></el-table-column>
         <el-table-column
          prop="createTime"
          label="申请时间"
        ></el-table-column>
        <el-table-column
          prop="chargePersonPhone"
          label="团长手机号"
        ></el-table-column>
        <el-table-column
          prop="siteName"
          label="自提点名称"
        ></el-table-column>
        <el-table-column
          label="所在地区"
        >
          <template slot-scope="scope">
            <span>
              {{scope.row.shopAdressProvince}}
              {{scope.row.shopAdressProvince == '' ? '' : '-'}}
              {{scope.row.shopAdressCity}}
              {{scope.row.shopAdressDetail == '' ? '' : '-'}}
              {{scope.row.shopAdressDetail}}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="shopAdress"
          label="详细地址"
        ></el-table-column>
        <el-table-column
          label="账号状态"
        >
        <template slot-scope="scope">
          <span>{{scope.row.state==0?'禁用':'启用'}}</span>
        </template>
        </el-table-column>
        <!-- <el-table-column
          prop="ip"
          label="IP地址"
        ></el-table-column> -->
         <el-table-column
          prop="loginTime"
          label="最后登录时间"
        ></el-table-column>
        <el-table-column label="操作" width="130">
          <template slot-scope="scope">
            <el-button  type="text">
               <span @click="Stop(scope.row) ">
                 <span v-if="scope.row.state==1">禁用</span>
                 <span v-if="scope.row.state==0">启用</span>
               </span>
             </el-button>
            <!-- <el-button @click="handleClick(scope.row)" type="text">冻结</el-button> -->
            <el-button @click="edit(scope.row)" type="text">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="mask" v-show="masknum">
            <div class="contenta">
                <p class="content-top">
                    <span>冻结</span>
                </p>
                <ul class="content-items">
                    <li class="item">
                        您确定冻结海悦天地F(自提点名称)的自提点吗？
                    </li>
                    <li class="item">
                       <span>请填写冻结原因</span>
                    </li>
                    <li class="item">

                        <el-input
                          type="textarea"
                          :autosize="{ minRows: 3, maxRows: 6}"
                          placeholder="请输入内容"
                          v-model="textarea">
                        </el-input>

                      
                    </li>
                </ul>
                <div class="content-bottom">
                    <el-button type="primary" >冻结</el-button>
                    <el-button type="warning"  @click="cancelClick">取消</el-button>
                </div>
            </div>
      </div> -->
    </div>
       <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
       </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sitePhone:'',
      createTime:'',
      state:'',
      merchantName:'',
      merchantNo:'',
      leader:'',
      indatetime:[],
      masknum:false,
      currentPage:1,
      textarea: '',
      page: 1,
      total:0,
      pageSize: 5,
      searchvalue1: "", //账号状态
      searchoptions1: [
        //合同状态
        { label: "启用", value: "1" },
        { label: "禁用", value: "0" },

      ],
      arr: [],
    };
  },
  mounted() {
    this.loadShopList();
  },
  methods: {
    // 冻结
    handleClick(row){
      this.masknum=true
      // this.$router.push({
      //   path:'/index/seeMerchant/',
      //   query:{shopId:row.shopId}
      // })
  },
  //取消
  cancelClick(){
        this.masknum=false 
  },
    //编辑
    edit(row){
       this.$router.push({
        path:'/index/headlistedit',
       query:{siteId:row.siteId}
      })
    },
    // 添加商家按钮
    searchClicka() {
      this.$router.push("/index/headListadd")
    },
    //分页
    handleSizeChange(val) {
          this.pageSize = val;
          this.loadShopList();
        },
     handleCurrentChange(val) {//分页
          this.page = val;
          this.loadShopList();
        },
    // 清空
    emptyClick() {
      this.sitePhone = ""
      // this.createTime = ""
        this.indatetime = ""
      this.state = ""
       this.loadShopList() 
    },
     Stop(row){//状态:0停用
       var com=0;
       if(row.state==0){
         com=1;
       }else{
          com=0;
       }
       console.log(com,'gahdgadhgadhadsgd')
        const param={
            siteId:row.siteId,
            state:com
        }  
       if(com==0){
           	this.$confirm('您确定要禁用吗？禁用后，商家将不可在登录商户后台', "警告", {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type:'warning'
				}).then(()=>{
          this.axios({
              url:'/site/updateState',
              method:'post',
              data:JSON.stringify(param),
          }).then(response => {
            if(response.data.code==""){
                    this.$message({ type: "success", message: "禁用成功!",});
                    this.loadShopList();
            }else{
                  this.$message({ type: "success", message: "禁用失败！！",});
            }
                });
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消更改',
					})
				})
       }else if(com==1){
          this.axios({
              url:'/site/updateState',
              method:'post',
              data:JSON.stringify(param),
          }).then(response => {
            if(response.data.code==""){
                    this.$message({ type: "success", message: "启用成功!",});
                    this.loadShopList();
            }else{
                  this.$message({ type: "success", message: "启用失败！！",});
            }
                });
       }
			
       },
    //筛选
    searchClick() {
      this.currentPage = 1
       var param = {
        sitePhone:this.sitePhone,
        page: 1,
        pageSize: this.pageSize,
        // createTime:this.createTime,
        createTime:this.indatetime[0],
        createTimeNew:this.indatetime[1],
        state:this.state 
      };
      console.log(this.state ,'state2222222')
      this.axios({
        url: "/site/listPlatformSite",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
        console.log('列表',res)
          this.arr = res.data.data.list;
           this.total=res.data.data.total
        
      
      });
    },
    //获取商户财务报表数据
    loadShopList() {
      var param = {
        page: this.page,
        pageSize: this.pageSize,
        shopName:this.merchantName,
        shopCode:this.merchantNo,
        chargePersonName:this.leader,
        State:this.State
      };

      this.axios({
        url: "/site/listPlatformSite",
        method: "post",
        data: JSON.stringify(param),
      }).then((res) => {
          this.arr = res.data.data.list;
          this.total=res.data.data.total
      
      });
    },
  },
  watch: {},
};
</script>

<style scoped>
/* 申请事件中间的“至”的样式 */
.headLsit>>> .el-range-editor--small .el-range-separator {
  line-height: 32px;
}
/* 搜索 */
.headLsit-header {
  margin-top: 20px;


}
.search-inp{
  display: flex;
  margin-bottom: 20px;
}


 .item-text {
  width: 100px;
  text-align: right;

  margin-right: 10px;
}
/* 搜索按钮 */
.search-btn {
 
  margin-bottom: 20px;
  display: flex;
}


/* 表格 */
.table-box {
  margin-top: 40px;
}
/* 遮罩层 */
.mask {
  width: 100vw;
  height: 100vh;
  /* color: #555; */
  background: rgba(51, 51, 51, 0.692);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
}
.info{
    padding-left: 50px;
}
.mask .contenta {
  width: 580px;
  height: 400px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30PX;
}

.mask .content-top {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}

.mask .content-top img {
  width: 25px;
}

.content-items {
  margin: 40px 0 0 15px;
}

.content-items .item {
  margin: 12px 10px;
  display: flex;
  align-items: center;
}

.content-items .item span:first-child {
  display: inline-block;
  width: 150px;
}

.content-bottom{
  margin: 80px 0 0 180px;

}
</style>
<style >

</style>